<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">帮助中心</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="tab-list">
			<view class="title">常见问题</view>
			<view class="list-item" v-for="(item,index) in tabList" :key="index" @tap="navTo(2,item)">
				<view>{{item.categoryName}}</view>
				<view>
					<u-icon name="arrow-right" color="#999" size="30upx"></u-icon>
				</view>
			</view>
		</view>
		<view class="foot">
			<navigator url="/pages/user/feedback">反馈建议</navigator>
		</view>
	</view>
</template>

<script>
	import {getNewsList} from '../../api/user.js'
	export default {
		data(){
			return {
				tabList:[]
			}
		},
		onLoad() {
			this.getNewsData();
		},
		methods:{
			getNewsData() {
				getNewsList({categoryKey:"2be33fb9d6a148f3a6d874440324a293"}).then(res => {
					if (res.data.success) {
						this.tabList = res.data.obj;
					}
				});
			},
			navTo(i,cur){
				if(i == 1){
					uni.navigateTo({
						url:cur
					});
					return;
				}
				uni.navigateTo({
					url:`/pages/user/problemDetail?id=${cur.articleId}`
				});
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 140upx 30upx 220upx;
		background-color: #fff;
		.foot{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 200upx;
			padding: 0 58upx;
			padding-top: 20upx;
			background-color: #fff;
			navigator{
				background-color: #2c1769;
				width: 100%;
				height: 100upx;
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 100upx;
			}
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		
		.tab-list{
			padding-top: 20upx;
			.helpBanner{
				width: 100%;
				margin-bottom: 40upx;
				image{
					width: 100%;
				}
			}
			.title{
				color: #999;
				font-size: 24upx;
				border-bottom: 1px solid #F7F7F7;
				margin-bottom: 30upx;
				padding-bottom: 20upx;
			}
			.list-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30upx;
				color: #333;
				border-bottom: 1px solid #F7F7F7;
				margin-bottom: 30upx;
				padding-bottom: 28upx;
				.icon_img_right {
					height: 20upx;
				}
			}
		}
		
	}
</style>
